<template>
  <v-main>
    <div v-if="isLogin">
      <v-text-field
        v-model="deviceID"
        class="ma-12"
        label="Your deviceID"
        prepend-inner-icon="mdi-key-variant"
        readonly
        outlined
      >
      </v-text-field>
      <div style="text-align: center">
        <v-btn width="200px" outlined color="primary" v-on:click="handleSignOut"
          >退出
        </v-btn>
      </div>
    </div>
    <div v-else>
      <v-text-field
        ref="inputKey"
        v-model="inputKey"
        class="ma-12"
        label="Your DeviceID"
        prepend-inner-icon="mdi-key-variant"
        :rules="rules"
        clearable
        outlined
      ></v-text-field>
      <div style="text-align: center">
        <v-btn width="200px" outlined color="primary" v-on:click="handleLogin"
          >登陆
        </v-btn>
      </div>
    </div>
  </v-main>
</template>

<script>
export default {
  name: "Login",
  data: function () {
    return {
      inputKey: "",
      rules: [(value) => !!value || "DeviceID is Required."],
    };
  },
  methods: {
    handleLogin: function () {
      if (this.inputKey === "") {
        return;
      }
      localStorage.deviceID = this.inputKey;
      localStorage.isLogin = true;
      this.$router.replace("/");
    },
    handleSignOut: function () {
      localStorage.deviceID = 0;
      localStorage.isLogin = false;
      location.reload();
      this.$router.go(0);
    },
  },
  mounted() {
    // 自动吸附光标到输入框
    /*this.$nextTick(() => {
                this.$refs.inputKey.focus()
            });*/
  },
  computed: {
    deviceID: function () {
      return localStorage.deviceID;
    },
    isLogin: function () {
      console.log(typeof localStorage.isLogin, localStorage.isLogin);
      if (localStorage.isLogin == "true") {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>